<template>
  <section class="cms-body flex">
    <!-- 返回组件 -->
    <a class="cms-back" href="javascript:void(0)" @click="back"></a>
    <!--&lt;!&ndash; 树组件 &ndash;&gt;
    <areaTree @change="getAreaInfo" :hasContent='true'></areaTree>-->
    <div class="cms-content-right">
      <el-form ref="form" :model="areaInfo" :rules="rules" class="cms-form" label-width="162px" v-loading="loading">

        <el-form-item label="Id" class="flex-50 " prop="areaId">
          <el-input class="cms-width" v-model="areaInfo.areaId"></el-input>
        </el-form-item>
        <el-form-item label="社区名称" class="flex-50 " prop="areaName">
          <el-input class="cms-width" v-model="areaInfo.areaName"></el-input>
        </el-form-item>
        <el-form-item label="行政编码" class="flex-50 " prop="adCode">
          <el-input class="cms-width" v-model="areaInfo.adCode"></el-input>
        </el-form-item>
        <el-form-item label="父级" class="flex-50 " prop="parentId">
          <el-input class="cms-width" v-model="areaInfo.parentId"></el-input>
        </el-form-item>
        <el-form-item label="级别" class="flex-50 " prop="areaLevel">
          <el-input class="cms-width" v-model="areaInfo.areaLevel"></el-input>
        </el-form-item>
        <el-form-item label="全拼" class="flex-50 " prop="fullLetter">
          <el-input class="cms-width" v-model="areaInfo.fullLetter"></el-input>
        </el-form-item>
        <el-form-item label="首字母" class="flex-50 " prop="firstLetter">
          <el-input class="cms-width" v-model="areaInfo.firstLetter"></el-input>
        </el-form-item>

        <div class="form-footer">
          <el-button type="primary" @click="update(false)" v-perms="'/area/update'">修改</el-button>
          <el-button type="info" @click="$reset">重置</el-button>
        </div>
      </el-form>
    </div>
  </section>
</template>
<script>
  import formMixins from "@/mixins/form";
  import axios from "axios";
  import va from "@/rules";

  export default {
    mixins: [formMixins],
    data() {
      let self = this;
      let required = va.required("此项必填");
      let number = va.number("只能输入数字");
      let string = va.string("只能输入英文字母");
      return {
        params: this.$route.query, //前一个页面带过来的数据
        rules: {
          parentId: [required],
          title: [required],
          typeId: [required, number],
          isOpen: [number],
          charge: [number]
        },
        fieldRequied: [
          {required: true, message: "此项必填", trigger: "change"}
        ],
        parentId: "",
        dataState: false,
        loading: true,
        treeData: [],
        areaInfo: {
          parentId: "", //上层频道id,
          areaId: "",
          areaName: "",
          adCode: "",
          parentId: "",
          areaLevel: "",
          fullLetter: "",
          firstLetter: ""
        }
      };
    },
    methods: {
      back() {
        this.routerLink("/area/pageList", "list", this.parentId);
      },
      getAreaInfo() {
        //获取频道默认信息
        axios.post(this.$api.areaDetail, {areaId: this.params.id}).then(res => {
          let data = res.body;
          this.getDefaultInfo(data);
        });
      },
      getDefaultInfo(data) {
        this.areaInfo.parentId = data.parentId;
        this.parentId = data.parentId;
        this.areaInfo.areaId = data.areaId;
        this.areaInfo.areaName = data.areaName;
        this.areaInfo.adCode = data.adCode;
        this.areaInfo.areaLevel = data.areaLevel;
        this.areaInfo.fullLetter = data.fullLetter;
        this.areaInfo.firstLetter = data.firstLetter;
        this.loading = false;
        console.log(this.areaInfo);
      },
      getParams() {
        params.id = this.params.id;
        return params;
      },
      reset() {
        window.location.reload();
      },
      update() {
        let form = this.$refs["form"];
        form.validate(valid => { //验证方法
          if (valid) {
            this.loading = true;
            axios
              .post(this.$api.areaUpdate, this.areaInfo)
              .then(res => {
                if (res.code == "200") {
                  this.successMessage("修改成功");
                  console.log(res)
                  setTimeout(() => {
                    this.routerLink("/area/pageList", "list", this.parentId);
                  }, 1000);
                }
                this.loading = false;
              })
              .catch(error => {
                this.loading = false;
              });
          } else {
            return false;
          }
        });
      }
    },
    created() {
      this.$store.dispatch("setCollapse", false); //收缩状态栏
      this.getAreaInfo();
    },
    mounted() {
      let clientHeight = document.body.clientHeight
      $('.cms-body').css('minHeight', clientHeight - 110 + 'px')
    }
  };
</script>

<style scss scoped>
</style>
